<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="12" class="searchInput">
          <el-input v-model="custQuery" placeholder="姓名、手机号、编号" clearable class="input-with-select" @change="searchBtn">
            <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
          </el-input>
        </el-col>
        <el-col :span="12" align="right" class="addBtnStyle">
          <el-button type="primary" @click="addReturnVisit">+ 增加投诉</el-button>
        </el-col>
      </el-row>
      <el-row class="margin-top float-l">
        <!-- <el-col :span="10">
        </el-col> -->
        <Search :data="selections" :attribute="'closingDate'" class="selectionDates" @change="handleTypeChange" @dateChange="handleDateChange" />
        <el-select v-model="query.complaintType" clearable placeholder="请选择投诉类型" class="el-select-y" @change="searchBtn">
          <el-option
            v-for="item in complaintTypeList"
            :key="item.id"
            :label="item.value"
            :value="item.label"
          />
        </el-select>
        <el-select v-model="query.complaintMode" clearable placeholder="请选择投诉方式" class="el-select-y" @change="searchBtn">
          <el-option
            v-for="item in complaintModeList"
            :key="item.id"
            :label="item.value"
            :value="item.label"
          />
        </el-select>
        <el-select v-model="query.generateWorkOrder" clearable placeholder="请选择工单" class="el-select-y" @change="searchBtn">
          <el-option
            v-for="item in workOrderList"
            :key="item.id"
            :label="item.value"
            :value="item.label"
          />
        </el-select>
      </el-row>
      <el-row class="margin-top">
        <el-col>
          <TypeSelection :data="datas" :default-value="1" :on-change="datasChange" class="TypeSelection" />
        </el-col>
      </el-row>
    </div>
    <div class="box-show margin-top" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table :data="list" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="顾客" prop="customerName" show-overflow-tooltip />
        <el-table-column label="性别" prop="customerSex" show-overflow-tooltip />
        <el-table-column label="投诉类型" prop="complaintType" show-overflow-tooltip />
        <el-table-column label="关联项目" prop="projectName" show-overflow-tooltip />
        <el-table-column label="投诉方式" prop="complaintMode" show-overflow-tooltip />
        <el-table-column label="生成工单" prop="generateWorkOrder" show-overflow-tooltip />
        <el-table-column label="接待客服" prop="receptionCustomerServiceName" show-overflow-tooltip />
        <el-table-column label="截止时间" prop="closingDate" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.closingDate.split(" ")[0] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理人" prop="handlerName" show-overflow-tooltip />
        <el-table-column label="状态" prop="complaintStatus" show-overflow-tooltip />
        <el-table-column label="操作" min-width="150px">
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleComplaint(row,true)">查看</el-button>
            <el-button v-if="row.complaintStatus === '未处理'" type="text" @click="handleComplaint(row)">开始处理</el-button>
            <el-button v-if="row.complaintStatus === '处理中'" type="text" @click="handleComplaint(row)">继续处理</el-button>
            <el-button v-if="row.complaintStatus === '已过期'" type="text" @click="handleComplaint(row)">开始补处理</el-button>
            <el-button v-if="row.complaintStatus === '未处理' || row.complaintStatus === '已过期'" type="text" @click="modifyComplaint(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page-num="queryParams.page"
        :page-size="queryParams.pageSize"
        :on-change="handlePaginationChange"
        :total="total"
      />
    </div>
    <AddComplaint v-if="visible" :visible.sync="visible" :title="title" :complaint-type-list="complaintTypeList" :complaint-mode-list="complaintModeList" :current-row="currentRow" @handleClose="visible= false;currentRow={};" @handleSuccess="handleSuccess" />
    <HandleWorkOrder v-if="statrVisible" :visible.sync="statrVisible" :current-row="currentRowDetails" @handleClose="startHnadle" @handleSuccess="handleSuccess" />
    <SeeComplaint v-if="visibleDetails" :visible.sync="visibleDetails" :current-row="currentRowDetails" @handleClose="visibleDetails= false;" />
  </div>
</template>
<script>
import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
import { backUp } from "@/config";
import { tableColor, labelHeigh } from '@/utils/common.js';
import AddComplaint from "./addComplaint";
import HandleWorkOrder from "./handleWorkOrder";
import SeeComplaint from "./seeComplaint";
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
export default {
  components: {
    Search,
    TypeSelection,
    AddComplaint,
    HandleWorkOrder,
    SeeComplaint,
  },
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      complaintTypeList: [{ id: 1, value: "服务", label: "服务" }, { id: 2, value: "治疗效果", label: "治疗效果" }, { id: 3, value: "收费", label: "收费" }, { id: 4, value: "其他", label: "其他" }],
      complaintModeList: [{ id: 1, value: "电话投诉", label: "电话投诉" }, { id: 2, value: "网络投诉", label: "网络投诉" }, { id: 3, value: "现场投诉", label: "现场投诉" }],
      workOrderList: [{ id: 1, value: "是", label: "是" }, { id: 2, value: "否", label: "否" }],
      total: 0,
      visible: false,
      visibleDetails: false,
      reveal: false,
      selections: backUp,
      query: {
        complaintType: '',
        complaintMode: '',
        generateWorkOrder: '',
        complaintStatus: '未处理',
      },
      datas: [
        { id: 0, name: '全部' },
        { id: 1, name: '未处理' },
        // { id: 2, name: '待退款' },
        { id: 2, name: '已处理' },
        { id: 3, name: '已过期' },
        { id: 4, name: '已补处理' },
        // { id: 4, name: '已退款' },
      ],
      list: [],
      tableColor,
      innerHeight: null,
      title: '',
      currentRow: {},
      custQuery: '',
      currentRowDetails: {},
      startReturnVisitContent: {},
      statrVisible: false,
    };
  },
  computed: {
  },
  mounted() {
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getList() {
      const query = JSON.parse(JSON.stringify(this.query));
      if (!query.complaintType) query.complaintType = undefined;
      if (!query.complaintMode) query.complaintMode = undefined;
      if (!query.generateWorkOrder) query.generateWorkOrder = undefined;
      if (query.complaintStatus === "全部") query.complaintStatus = undefined;
      if (!query.closingDate) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        query.timeType = "today";
        query.closingDate = beginTime + "_" + endTime;
      }
      const res = await this.$api['data/complaint/complaint']({ ...this.queryParams, query: query, custQuery: this.custQuery });
      if (res.code !== 200) return;
      this.list = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    handleDateChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    handleTypeChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    datasChange(item) {
      this.queryParams.page = 1;
      this.$set(this.query, 'complaintStatus', item.name);
      this.getList();
    },
    searchBtn() {
      this.queryParams.page = 1;
      this.getList();
    },
    addReturnVisit() {
      this.title = "增加投诉";
      this.visible = true;
    },
    handleSuccess() {
      this.visible = false;
      this.currentRow = {};
      this.statrVisible = false;
      this.currentRowDetails = {};
      this.queryParams.page = 1;
      this.getList();
    },
    startHnadle() {
      this.statrVisible = false;
      this.getList();
    },
    async handleComplaint(row, isTrue) {
      const res = await this.$api['data/complaint/getComplaintDetails']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.currentRowDetails = JSON.parse(JSON.stringify(res.data));
      if (isTrue) {
        this.visibleDetails = true;
      } else {
        this.statrVisible = true;
      }
    },
    async modifyComplaint(row) {
      this.title = "修改投诉";
      this.visible = true;
      const res = await this.$api['data/complaint/getComplaintDetails']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.currentRow = JSON.parse(JSON.stringify(res.data));
    },
  },
};
</script>
<style scoped lang="scss">
.margin-top{
    margin-top: 10px;
}
.float-l{
  .selectionDates,.el-select-y {
      margin:0 10px 0 0!important;
  }

}

</style>
